<template>
  <div class="merchant-page">
    <div class="page-container">
      <!-- 页面头部 -->
      <div class="page-header animate__animated animate__fadeInUp">
        <h1 class="page-title">
          <span class="gradient-text">商家入驻</span>
        </h1>
        <p class="page-subtitle">加入AI梦工厂，开启您的商业新篇章</p>
      </div>

      <!-- 入驻优势 -->
      <section class="benefits-section">
        <h2 class="section-title">为什么选择我们？</h2>
        <div class="benefits-grid">
          <div
            v-for="(benefit, index) in benefits"
            :key="index"
            class="benefit-card tiktok-card animate__animated animate__fadeInUp"
            :style="{ animationDelay: `${index * 0.1}s` }"
          >
            <div class="benefit-icon">{{ benefit.icon }}</div>
            <h3 class="benefit-title">{{ benefit.title }}</h3>
            <p class="benefit-description">{{ benefit.description }}</p>
          </div>
        </div>
      </section>

      <!-- 入驻流程 -->
      <section class="process-section">
        <h2 class="section-title">入驻流程</h2>
        <div class="process-timeline">
          <div
            v-for="(step, index) in processSteps"
            :key="index"
            class="process-step animate__animated animate__fadeInLeft"
            :style="{ animationDelay: `${index * 0.2}s` }"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h3 class="step-title">{{ step.title }}</h3>
              <p class="step-description">{{ step.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 入驻表单 -->
      <section class="form-section">
        <h2 class="section-title">申请入驻</h2>
        <div class="form-container">
          <n-card class="merchant-form-card">
            <n-form
              ref="formRef"
              :model="formData"
              :rules="formRules"
              label-placement="top"
              size="large"
            >
              <n-grid :cols="2" :x-gap="24" :y-gap="16" responsive="screen">
                <n-grid-item :span="2">
                  <n-form-item label="店铺名称" path="shopName">
                    <n-input
                      v-model:value="formData.shopName"
                      placeholder="请输入您的店铺名称"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item>
                  <n-form-item label="联系人姓名" path="contactName">
                    <n-input
                      v-model:value="formData.contactName"
                      placeholder="请输入联系人姓名"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item>
                  <n-form-item label="联系电话" path="phone">
                    <n-input
                      v-model:value="formData.phone"
                      placeholder="请输入联系电话"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item label="邮箱地址" path="email">
                    <n-input
                      v-model:value="formData.email"
                      placeholder="请输入邮箱地址"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item>
                  <n-form-item label="公司名称" path="companyName">
                    <n-input
                      v-model:value="formData.companyName"
                      placeholder="请输入公司名称"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item>
                  <n-form-item label="所在地区" path="location">
                    <n-select
                      v-model:value="formData.location"
                      placeholder="请选择所在地区"
                      :options="locationOptions"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item label="主营业务" path="businessType">
                    <n-select
                      v-model:value="formData.businessType"
                      placeholder="请选择主营业务类型"
                      :options="businessTypeOptions"
                      multiple
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item label="产品介绍" path="productDescription">
                    <n-input
                      v-model:value="formData.productDescription"
                      type="textarea"
                      placeholder="请详细介绍您的产品或服务"
                      :rows="4"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item label="合作期望" path="cooperation">
                    <n-input
                      v-model:value="formData.cooperation"
                      type="textarea"
                      placeholder="请描述您的合作期望和目标"
                      :rows="3"
                    />
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item label="产品资料上传" path="files">
                    <n-upload
                      multiple
                      directory-dnd
                      :max="5"
                      :file-list="fileList"
                      @update:file-list="handleFileListChange"
                    >
                      <n-upload-dragger>
                        <div class="upload-area">
                          <n-icon size="48" class="upload-icon">
                            <CloudUpload />
                          </n-icon>
                          <div class="upload-text">
                            <p class="upload-hint">点击或拖拽文件到此区域上传</p>
                            <p class="upload-desc">支持 PDF、DOC、PPT、图片等格式，最多5个文件</p>
                          </div>
                        </div>
                      </n-upload-dragger>
                    </n-upload>
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <n-form-item path="agreement">
                    <n-checkbox v-model:checked="formData.agreement">
                      我已阅读并同意
                      <n-button text type="primary" @click="showAgreement = true">
                        《商家入驻协议》
                      </n-button>
                    </n-checkbox>
                  </n-form-item>
                </n-grid-item>
                
                <n-grid-item :span="2">
                  <div class="form-actions">
                    <n-button
                      type="primary"
                      size="large"
                      class="tiktok-btn submit-btn"
                      @click="handleSubmit"
                      :loading="submitLoading"
                    >
                      <template #icon>
                        <n-icon><Send /></n-icon>
                      </template>
                      提交申请
                    </n-button>
                    <n-button size="large" @click="handleReset">
                      重置表单
                    </n-button>
                  </div>
                </n-grid-item>
              </n-grid>
            </n-form>
          </n-card>
        </div>
      </section>
    </div>

    <!-- 协议模态框 -->
    <n-modal v-model:show="showAgreement" class="agreement-modal">
      <n-card
        style="width: 80%; max-width: 800px; max-height: 80vh;"
        title="商家入驻协议"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="agreement-content">
          <h3>1. 总则</h3>
          <p>欢迎您申请入驻AI梦工厂平台。在您申请入驻前，请仔细阅读本协议的全部内容。</p>
          
          <h3>2. 入驻条件</h3>
          <p>商家应具备合法的经营资质，提供的产品和服务应符合国家相关法律法规。</p>
          
          <h3>3. 权利义务</h3>
          <p>商家有权在平台上展示和销售符合平台规范的产品，同时应保证产品质量和服务水平。</p>
          
          <h3>4. 费用结算</h3>
          <p>平台将按照约定的分成比例与商家进行费用结算，结算周期为月结。</p>
          
          <h3>5. 违约责任</h3>
          <p>如商家违反本协议约定，平台有权暂停或终止合作关系。</p>
          
          <h3>6. 其他条款</h3>
          <p>本协议的解释权归AI梦工厂平台所有，如有争议，双方友好协商解决。</p>
        </div>
        <template #footer>
          <div class="modal-footer">
            <n-button @click="showAgreement = false">关闭</n-button>
            <n-button
              type="primary"
              class="tiktok-btn"
              @click="acceptAgreement"
            >
              同意协议
            </n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useMessage, type FormInst, type UploadFileInfo } from 'naive-ui'


const message = useMessage()
const formRef = ref<FormInst | null>(null)
const submitLoading = ref(false)
const showAgreement = ref(false)
const fileList = ref<UploadFileInfo[]>([])

// 表单数据
const formData = reactive({
  shopName: '',
  contactName: '',
  phone: '',
  email: '',
  companyName: '',
  location: '',
  businessType: [],
  productDescription: '',
  cooperation: '',
  agreement: false
})

// 入驻优势
const benefits = [
  {
    icon: '📈',
    title: '流量曝光',
    description: '获得平台首页推荐位，提升品牌知名度和产品曝光度'
  },
  {
    icon: '💰',
    title: '丰厚收益',
    description: '高分成比例，多样化的收益模式，让您的产品价值最大化'
  },
  {
    icon: '🛠️',
    title: '技术支持',
    description: '专业的技术团队提供全方位支持，解决您的技术难题'
  },
  {
    icon: '📊',
    title: '数据分析',
    description: '详细的销售数据分析，帮助您优化产品和营销策略'
  },
  {
    icon: '🎯',
    title: '精准营销',
    description: '基于用户画像的精准营销推广，提升转化率'
  },
  {
    icon: '🤝',
    title: '专属服务',
    description: '一对一的客户经理服务，为您提供个性化的合作方案'
  }
]

// 入驻流程
const processSteps = [
  {
    title: '提交申请',
    description: '填写入驻申请表，上传相关资质文件'
  },
  {
    title: '资质审核',
    description: '平台审核团队将在3-5个工作日内完成审核'
  },
  {
    title: '签署协议',
    description: '审核通过后，双方签署正式的合作协议'
  },
  {
    title: '产品上架',
    description: '完成产品信息录入，正式在平台上架销售'
  },
  {
    title: '运营推广',
    description: '开始运营推广，享受平台提供的各项服务'
  }
]

// 表单验证规则
const formRules = {
  shopName: {
    required: true,
    message: '请输入店铺名称',
    trigger: 'blur'
  },
  contactName: {
    required: true,
    message: '请输入联系人姓名',
    trigger: 'blur'
  },
  phone: {
    required: true,
    message: '请输入联系电话',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱地址',
    trigger: 'blur'
  },
  companyName: {
    required: true,
    message: '请输入公司名称',
    trigger: 'blur'
  },
  location: {
    required: true,
    message: '请选择所在地区',
    trigger: 'change'
  },
  businessType: {
    required: true,
    message: '请选择主营业务类型',
    trigger: 'change'
  },
  productDescription: {
    required: true,
    message: '请输入产品介绍',
    trigger: 'blur'
  },
  cooperation: {
    required: true,
    message: '请输入合作期望',
    trigger: 'blur'
  },
  agreement: {
    required: true,
    validator: (_rule: any, value: boolean) => {
      return value === true
    },
    message: '请先阅读并同意入驻协议',
    trigger: 'change'
  }
}

// 选项数据
const locationOptions = [
  { label: '北京市', value: 'beijing' },
  { label: '上海市', value: 'shanghai' },
  { label: '广东省', value: 'guangdong' },
  { label: '浙江省', value: 'zhejiang' },
  { label: '江苏省', value: 'jiangsu' },
  { label: '山东省', value: 'shandong' },
  { label: '其他地区', value: 'other' }
]

const businessTypeOptions = [
  { label: 'AI编程工具', value: 'ai-programming' },
  { label: '开发效率工具', value: 'dev-tools' },
  { label: '代码管理工具', value: 'code-management' },
  { label: '测试工具', value: 'testing-tools' },
  { label: '部署运维工具', value: 'devops-tools' },
  { label: '设计工具', value: 'design-tools' },
  { label: '其他软件工具', value: 'other-tools' }
]

// 方法
const handleFileListChange = (files: UploadFileInfo[]) => {
  fileList.value = files
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    // 模拟提交申请
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    message.success('申请提交成功！我们将在3-5个工作日内完成审核并联系您。')
    
    // 重置表单
    handleReset()
    
  } catch (error) {
    message.error('请检查表单信息是否完整')
  } finally {
    submitLoading.value = false
  }
}

const handleReset = () => {
  Object.keys(formData).forEach(key => {
    if (key === 'businessType') {
      (formData as any)[key] = []
    } else if (key === 'agreement') {
      (formData as any)[key] = false
    } else {
      (formData as any)[key] = ''
    }
  })
  fileList.value = []
}

const acceptAgreement = () => {
  formData.agreement = true
  showAgreement.value = false
  message.success('已同意入驻协议')
}
</script>

<style scoped>
.merchant-page {
  min-height: 100vh;
  padding-top: 40px;
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 80px;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.page-subtitle {
  font-size: 1.2rem;
  color: #cccccc;
  font-weight: 500;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #FE2C55, #8B5CF6);
  margin: 16px auto 0;
  border-radius: 2px;
}

/* Benefits Section */
.benefits-section {
  margin-bottom: 80px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.benefit-card {
  text-align: center;
  padding: 32px 24px;
  transition: all 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-8px);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.benefit-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffffff;
}

.benefit-description {
  color: #cccccc;
  line-height: 1.6;
}

/* Process Section */
.process-section {
  margin-bottom: 80px;
}

.process-timeline {
  max-width: 800px;
  margin: 0 auto;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(22, 24, 35, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(254, 44, 85, 0.1);
  position: relative;
}

.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 48px;
  bottom: -32px;
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, #FE2C55, #8B5CF6);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FE2C55, #8B5CF6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
}

.step-description {
  color: #cccccc;
  line-height: 1.6;
}

/* Form Section */
.form-section {
  margin-bottom: 80px;
}

.form-container {
  max-width: 800px;
  margin: 0 auto;
}

.merchant-form-card {
  background: rgba(22, 24, 35, 0.8) !important;
  border: 1px solid rgba(254, 44, 85, 0.2) !important;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}

.upload-icon {
  color: #FE2C55;
  margin-bottom: 16px;
}

.upload-text {
  text-align: center;
}

.upload-hint {
  font-size: 1.1rem;
  color: #ffffff;
  margin-bottom: 8px;
}

.upload-desc {
  color: #999999;
  font-size: 0.9rem;
}

.form-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.submit-btn {
  padding: 16px 32px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

/* Agreement Modal */
.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
}

.agreement-content h3 {
  color: #FE2C55;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 24px 0 12px 0;
}

.agreement-content h3:first-child {
  margin-top: 0;
}

.agreement-content p {
  color: #cccccc;
  line-height: 1.6;
  margin-bottom: 16px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .process-step {
    flex-direction: column;
    text-align: center;
  }
  
  .process-step::after {
    display: none;
  }
  
  .form-actions {
    flex-direction: column;
  }
}
</style>
